<template>
  <div>
    <van-nav-bar>
      <template #left>
        <img src="@/assets/logo.png" class="logo" alt="" />
      </template>
      <template #right>
        <van-button to="/search" class="btn" round icon="search" type="info"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <div class="tabs-box">
      <van-tabs v-model="active">
        <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
          <ArticleList :channel_id="item.id" />
        </van-tab>
      </van-tabs>
      <!-- 频道栏图标 -->
      <van-icon
        class="open-icon"
        name="wap-nav"
        @click="$refs.manageCh.show = true"
      >
      </van-icon>

      <!-- 管理频道栏 -->
    </div>

    <ManageChannel
          ref="managech"
          :channelList="ownList"
          :allList="allList"
          :value="active"
          @input="active = $event"
        />

    <!-- v-model语法糖：
        用v-model=数据  会自动生成 ：value=数据 和 @input="数据=$event" 这两句代码-->
    <ManageChannel
      ref="manageCh"
      :channelList="ownList"
      :allList="allList"
      v-model="active"
      @add="ownList.push($event)"
      @del="del"
    />
  </div>
</template>

<script>
import { ownListAPI, allListAPI, saveChannelAPI } from '@/api/channel'
// 导入文章列表组件
import ArticleList from './components/ArticleList.vue'
import ManageChannel from './components/ManageChannel.vue'
export default {
  name: 'MyHome',
  components: {
    ArticleList,
    ManageChannel
  },
  data () {
    return {
      active: 0,
      ownList: [],
      allList: [],
      isFirst: true
    }
  },
  methods: {
    del (index) {
      if (index < this.active) {
        this.active--
      }
      this.ownList.splice(index, 1)
    }
  },
  async created () {
    // if (this.$store.state.user.tokenObj.token) {
    //   // 发请求获取我的频道
    //   const res1 = await ownListAPI()
    //   this.ownList = res1.data.channels
    // } else {
    //   // 没登陆，获取本地存储
    //   const local = JSON.parse(localStorage.getItem('channel100'))
    //   if (local) {
    //     this.ownList = local
    //   } else {
    //     // 没有就发请求获取
    //     const res1 = await ownListAPI()
    //     this.ownList = res1.data.channels
    //   }
    // }

    // // 获取所有频道数据
    // const res2 = await allListAPI()
    // this.allList = res2.data.channels

    // 改良以上代码：
    // 只有登陆了和没数据  才需要发请求
    const local = JSON.parse(localStorage.getItem('channel100'))
    if (this.$store.state.user.tokenObj.token || !local) {
      const res1 = await ownListAPI()
      this.ownList = res1.data.channels
    } else {
      this.ownList = local
    }
    // 获取所有频道数据
    const res2 = await allListAPI()
    this.allList = res2.data.channels
  },
  watch: {
    async ownList () {
      // 设置开关 解决第一次进页面就发请求的性能问题
      if (this.isFirst) {
        this.isFirst = false
        return
      }
      if (this.$store.state.user.tokenObj.token) {
        const channels = this.ownList.map((v, i) => {
          return { id: v.id, seq: i }
        })
        await saveChannelAPI({
          channels
        })
      } else {
        localStorage.setItem('channel100', JSON.stringify(this.ownList))
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tabs-box {
  position: relative;
  ::v-deep .van-tabs__wrap {
    width: 345px;
  }
  .open-icon {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 30px;
    height: 44px;
    line-height: 44px;
  }
}
.van-nav-bar {
  .logo {
    width: 120px;
  }
  .btn {
    background-color: #5aabfb;
    width: 100px;
    height: 30px;
    border: none;
    .van-button__icon {
      color: #fff;
    }
  }
}
</style>
